<template>
	<view class="certificate">

		<l-painter :board="poster" ref="painter" />





		<!-- <view class="cover_view">
			<image src="https://kelai.huazhuangpin168.cn/static/images/c.png" class="cover"></image>
		</view> -->
		<view class="footer">
			<view class="submit" @click="submit">
				保存本地
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
	} from '@/config/app';

	import {
		getOrderDetail
	} from '@/api/order.js';

	export default {
		data() {
			return {
				poster: {}
			}
		},
		onLoad(options) {

			getOrderDetail(options.order_id).then(async (res) => {
				let data = res.data;

				let user_name = data.donor_type == 1 ? data.donor_name : data.donor_company;
				user_name = user_name + ":";

				const cartInfo = data.cartInfo;
				let category = 0,
					total = 0;
				let book_name = "";

				if (cartInfo.length) {
					category = cartInfo.length;
					data.cartInfo.forEach(item => total += item.cart_num);
					book_name = cartInfo[0].productInfo.store_name
				}
				let desc = `等  ${category}  种  ${total}  册已被我馆收藏，我们将悉心保存`;

				
				let code = `收藏证书号:${data.certificate_number}`;

				let date = this.timestampToChinese(data.pay_time)

				let views = [{
						css: {
							width: "100%",
							height: "1024rpx",
							position: "fixed",
							left: "0rpx",
							bottom: "0rpx"
						},
						type: "image",
						src: HTTP_REQUEST_URL + '/static/images/c.png'
					},
					{
						css: {
							width: "212rpx",
							height: "166rpx",
							position: "fixed",
							left: "84rpx",
							bottom: "162rpx"
						},
						type: "image",
						src: HTTP_REQUEST_URL + '/static/images/poster2.png'
					}, {
						css: {
							width: "96rpx",
							height: "96rpx",
							position: "fixed",
							right: "90rpx",
							bottom: "220rpx"
						},
						type: "image",
						src: HTTP_REQUEST_URL + '/static/images/poster3.png'
					},

					{
						text: code,
						type: "text",
						css: {
							display: "block",
							paddingBottom: "10rpx",
							color: "#000000",
							fontSize: "20rpx",
							fontWeight: "400",
							position: "fixed",
							right: "86rpx",
							top: "86rpx",
						}
					},
					{
						type: "view",
						css: {
							width: "100%",
							position: "fixed",
							left: "0rpx",
							top: "400rpx",
							padding: "0 86rpx",
							boxSizing: "border-box"
						},
						views: [{
								text: user_name,
								type: "text",
								css: {
									width: "100%",
									display: "block",
									paddingBottom: "10rpx",
									color: "#000000",
									fontSize: "26rpx",
									fontWeight: "400",
								}
							},
							{
								text: "您捐赠的图书",
								type: "text",
								css: {
									width: "226rpx",
									display: "inline-block",
									color: "#000000",
									fontSize: "26rpx",
									fontWeight: "400",
									paddingLeft: "52rpx",
									boxSizing: "border-box"
								}
							},
							{
								text: book_name,
								type: "text",
								css: {
									width: "300rpx",
									display: "inline-block",
									textAlign: "center",
									color: "#000000",
									fontSize: "26rpx",
									fontWeight: "400",
									padding: "0 20rpx",
									boxSizing: "border-box",
									lineClamp: 1
								}
							},
							{
								text: desc,
								type: "text",
								css: {
									width: "100%",
									display: "block",
									paddingTop: "20rpx",
									color: "#000000",
									fontSize: "26rpx",
									fontWeight: "400",
									lineHeight: "32rpx",
								}
							},
							{
								text: "并充分发挥其作用。",
								type: "text",
								css: {
									width: "100%",
									display: "block",
									paddingTop: "20rpx",
									color: "#000000",
									fontSize: "26rpx",
									fontWeight: "400",
									lineHeight: "32rpx",
								}
							},
						]
					},
					{
						text: "馆长:",
						type: "text",
						css: {
							width: "130rpx",
							display: "block",
							paddingBottom: "10rpx",
							color: "#000000",
							fontSize: "26rpx",
							fontWeight: "400",
							position: "fixed",
							right: "112rpx",
							bottom: "240rpx"
						}
					},
					{
						text: date,
						type: "text",
						css: {
							display: "block",
							paddingBottom: "10rpx",
							color: "#000000",
							fontSize: "26rpx",
							fontWeight: "400",
							position: "fixed",
							right: "104rpx",
							bottom: "186rpx"
						}
					},
				]
				this.poster = {
					css: {
						width: "726rpx",
						height: "1024rpx",
					},
					views
				};
			})
		},
		methods: {

			timestampToChinese(timestamp) {
				const isSeconds = timestamp < 100000000000;
				const date = new Date(isSeconds ? timestamp * 1000 : timestamp);

				// 数字映射表
				const chineseNumbers = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
				const simpleNumbers = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();

				// 转换年份
				let yearStr = year.toString();
				let chineseYear = '';
				for (let i = 0; i < yearStr.length; i++) {
					chineseYear += simpleNumbers[parseInt(yearStr[i])];
				}

				// 转换月份
				let chineseMonth = '';
				if (month <= 10) {
					chineseMonth = chineseNumbers[month];
				} else if (month === 11) {
					chineseMonth = '十一';
				} else {
					chineseMonth = '十二';
				}

				// 转换日期
				let chineseDay = '';
				if (day <= 10) {
					chineseDay = chineseNumbers[day];
				} else if (day < 20) {
					chineseDay = '十' + (day === 10 ? '' : chineseNumbers[day % 10]);
				} else if (day === 20) {
					chineseDay = '二十';
				} else if (day < 30) {
					chineseDay = '二十' + chineseNumbers[day % 10];
				} else if (day === 30) {
					chineseDay = '三十';
				} else {
					chineseDay = '三十一';
				}

				return `${chineseYear}年${chineseMonth}月${chineseDay}日`;
			},

			downloadFile() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					pathType: 'url',
					success: (res) => {
						let url = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: (res) => {
								console.log('save success');
							},
							fail: (err) => {
								console.log(err);
							}
						});
					}
				})
			},
			submit() {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							this.downloadFile();
							return false;
						}
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => this.downloadFile(),
								fail: (err) => {
									uni.showModal({
										title: '授权保存',
										content: '拒绝授权,将无法正常保存图片',
										confirmText: "授权",
										success: (res) => {
											if (res.confirm) {
												wx.openSetting({
													success: (res) => {
														uni.showToast({
															title: '授权成功',
															duration: 2000,
															icon: "none"
														});
													}
												})
											}
										}
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.certificate {
		min-height: calc(100vh - var(--status-bar-height));
		background: #F8F8F9;
		padding: 20rpx 12rpx 0;
		box-sizing: border-box;

		.cover_view {
			padding: 70rpx 50rpx;
			box-sizing: border-box;

			.cover {
				width: 100%;
				height: 914rpx;
			}
		}

		.footer {
			width: 100%;
			// height: 146rpx;
			padding: 40rpx 130rpx 56rpx;
			box-sizing: border-box;
			background: #F8F8F9;
			// position: fixed;

			// left: 0;
			// bottom: 0rpx;
			// z-index: 99;

			.submit {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				background: linear-gradient(131deg, #FF8133 0%, #FF8133 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}
	}
</style>